﻿
@{
    ViewBag.Title = "歌手信息";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .el-tabs__nav-wrap::after{
        width:0px;
    }
</style>
<link href="~/Content/styles/album.css" rel="stylesheet" />
<div id="app" v-cloak>
    <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="height:60px;line-height:60px;padding-left:40px">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>歌手信息</el-breadcrumb-item>
            <el-breadcrumb-item><font style="font-weight:800">{{singer.SingerName}}</font></el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="content">
            <el-col :span="7" class="left" >
                <img style="width:180px;height:180px;padding-top:20px;" :src="singer.SingerPictrue" />
                <h3>歌手介绍</h3><br />
                <p>姓名: &nbsp; <font style="font-size:13px;">{{singer.SingerName}}</font> </p>
                <p>
                    生日: &nbsp;
                    <font style="font-size:13px;" v-if="singer.SingerBir!=''">{{singer.SingerBir}}</font>
                    <font style="font-size:13px;" v-else="singer.SingerBir!=''">暂无信息</font>
                </p>
                <p>
                    公司: &nbsp;
                    <font style="font-size:13px;" v-if="singer.SingerBir!=''">{{singer.Company}}</font>
                    <font style="font-size:13px;" v-else="singer.SingerBir!=''">暂无信息</font> 
                </p>
                <p>简介: &nbsp;<font style="font-size:13px;"> {{singer.SingerDesc}}</font> </p>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="16">
                <el-tabs v-model="activeName"  @@tab-click="handleClick">
                    <el-tab-pane label="单曲列表" name="music">
                        <span><font style="font-size:28px;font-weight:700">单曲列表</font> <font style="font-size:14px;padding-left:20px;">{{pagenation.totalCount}}首歌</font></span>
                        <el-table :data="MusicLists" ref="MusicLists" stripe v-loading="dataLodaing">
                            <template slot="empty">
                                <p>{{dataText}}</p>
                            </template>
                            <el-table-column type="index" width="80" label="序号">
                            </el-table-column>
                            <el-table-column prop="Musics.MusicName" label="歌曲名" width="180" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="Albums.AlbumName" label="专辑" width="150" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-link :underline="false" @@click="albumLink(scope.row.Albums.AlbumId)">{{scope.row.Albums.AlbumName}}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="Musics.MusicLong" label="时长" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button v-on:click="ListenMusic(scope.row)" type="text" size="small"><i class="el-icon el-icon-headset" style="font-size:18px;" title="试听"></i></el-button>
                                    <el-button v-on:click="BuyMusic(scope.row)" type="text" size="small"><i class="el-icon el-icon-shopping-cart-2" style="font-size:18px;" title="选购"></i></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div v-if="MusicLists.length != 0" class="typePage">
                            <el-pagination background layout="prev, pager, next" :pager-count="6" :total="pagenation.totalCount" v-on:current-change="CurrentChange" :current-page="pagenation.currentPage" :page-size="30">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="专辑列表" name="album">
                        <span><font style="font-size:28px;font-weight:700">专辑列表</font> <font style="font-size:14px;padding-left:20px;">共{{pagenations.totalCount}}张</font></span>
                        <el-table :data="AlbumLists" ref="AlbumLists" stripe v-loading="dataLodaing">
                            <template slot="empty">
                                <p>{{dataText}}</p>
                            </template>
                            <el-table-column type="index" width="80" label="序号">
                            </el-table-column>
                            <el-table-column prop="AlbumPic" label="专辑图片">
                                <template v-slot="scope">
                                    <img :src="scope.row.AlbumPic" width="60" height="60" onerror="showDefaultImg(this)"/>
                                </template>
                            </el-table-column>
                            <el-table-column prop="AlbumName" label="专辑名" width="180" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-link :underline="false" @@click="albumLink(scope.row.AlbumId)">{{scope.row.AlbumName}}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="AlbumTime" label="发行时间" show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                        <div v-if="AlbumLists.length != 0" class="typePage">
                            <el-pagination background layout="prev, pager, next" :pager-count="6" :total="pagenations.totalCount" v-on:current-change="CurrentChange" :current-page="pagenations.currentPage" :page-size="30">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                singer: {
                    SingerName: '',
                    AlbumPic: '',
                    SingerBir: '',
                    SingerDesc: '',
                    SingerPictrue: '',
                    Constellation: '',
                    Company:'',
                    SingerId:'@ViewData["id"]',
                },
                TableLabel: [
                    { prop: 'Musics.MusicName', label: '歌曲名', width: 200 },
                    { prop: 'Singer.SingerName', label: '歌手' },
                    { prop: 'Musics.MusicLong', label: '时长' },
                ],//表格信息的列的信息
                pagenation: {
                    currentPage: 1,
                    totalCount: 0,
                },//分页信息
                MusicLists: [],
                AlbumLists:[],
                dataLodaing: false,
                dataText: "",//进去页面先让字样为空
                activeName: 'music',
                pagenations: {
                    currentPage: 1,
                    totalCount: 0,
                },//分页信息
            }
        },
        mounted() {
            this.GetSingerInfo();
            this.GetMusicLists();
        },
        methods: {
            handleClick(tab, event) {
                if (tab.name == 'music') {
                    this.GetMusicLists()
                }
                if (tab.name == "album") {
                    this.GetAlbumLists()
                }
            },
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.GetMusicLists();
            },//分页当前页改变
            GetSingerInfo() {
                axios.post('/Music/GetSingerInfoById').then(res => {
                    this.singer = res.data.data
                })
            },
            GetMusicLists() {
                axios.post('/Music/GetSingerMusicList', { 'CurrentPage': this.pagenation.currentPage, 'SingerId': this.singer.SingerId }).then(res => {
                    this.MusicLists = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                    this.dataLodaing = false;
                    console.log(res.data.data);
                })
            },
            GetAlbumLists() {
                this.dataLodaing = true;
                axios.post('/Music/GetSingerAlbumList', { 'CurrentPage': this.pagenation.currentPage, 'SingerId': this.singer.SingerId }).then(res => {
                    this.AlbumLists = res.data.data
                    this.pagenations.totalCount = res.data.totalCount
                    console.log(res.data.data);
                })
                this.dataLodaing = false;

            },
            ListenMusic(row) {
                var info = JSON.parse(localStorage.getItem("ListenMusicLists")) || []
                if (info != []) {
                    if (info[0].MusicId != row.Musics.MusicId) {
                        let music = [{
                            'MusicId': row.Musics.MusicId,
                            'cover': '../musicImg/cover3.jpg',
                            'src': '../music/星弟 _ 小贱（谭冰尧） - 不想做朋友.mp3',
                            'title': row.Musics.MusicName + '-' + this.singer.SingerName,
                        }]
                        localStorage.setItem('ListenMusicLists', JSON.stringify(music));
                        $(function () {
                            var setConfig = {
                                song: JSON.parse(localStorage.getItem('ListenMusicLists')),
                                error: function (meg) {
                                    console.log(meg);
                                }
                            };
                            var audioFn = audioPlay(setConfig);
                            if (audioFn) {
                                audioFn.loadFile(true);
                            }
                        });
                        this.$message({
                            message: '正在播放，请稍等...',
                            type: 'success'
                        });
                        axios.post('/Music/AddClickCount', { 'id': row.Musics.MusicId })
                    }
                }


            },
            BuyMusic(row) {
                var lists = localStorage.getItem('BuyLists')
                lists = lists ? JSON.parse(lists) : [];
                const buy = {
                    'id': row.Musics.MusicId,
                    'MusicName': row.Musics.MusicName,
                    'SingerName': this.singer.SingerName,
                    'MusicLong': row.Musics.MusicLong,
                    'MusicBit': row.Musics.MusicBitRate,
                    'MusicAblum': row.Albums.AlbumName
                }
                let count = 0;
                if (lists.length > 0) {
                    for (var i = 0; i < lists.length; i++) {
                        if (row.Musics.MusicId == lists[i].id) {
                            count = count + 1;
                            this.$message.error('已经存在此歌曲!');
                            break;
                        }
                    }
                }
                if (count == 0) {
                    lists.push(buy);
                    this.$message({
                        message: '成功加入购物车',
                        type: 'success'
                    });
                }
                localStorage.setItem("BuyLists", JSON.stringify(lists));

            },
            albumLink(id) {
                window.open('/Album/AlbumList?id=' + id, "_blank");
            },
        },
        created() {
            this.dataLodaing = true;
        },
    });
    function showDefaultImg(img) {
        img.src = "../Content/1111.png";
        //不循环执行
        img.onerror = null;
    }
</script>

